<template>
  <div>
    <el-dialog
      title="新建采购订单"
      :visible.sync="visible"
      :modal-append-to-body="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      @close="closeDialog"
      
      width="2000px"
      fullscreen
    >
      <div class="warn">
        <p>
          <strong>说明:</strong>
          <br />标记*的必须录入数据的字段
          <br />
          <strong>请确保订购列表没有未完成的数据(即合计行不会出现NaN),因为这将会影响到其它的数据</strong>
        </p>
      </div>
      <div class="form"></div>
      <el-form
        ref="submit"
        :model="submit"
        label-position="left"
        label-width="105px"
        size="mini"
        inline
      >
        <el-form-item label="单号" label-width="50px">
          <el-input v-model="submit.ref" readonly placeholder="提交后自动生成"></el-input>
        </el-form-item>
        <el-form-item label="*交货日期" label-width="80px">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="submit.dealdate"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="*供应商" label-width="70px">
          <el-input v-model="submit.suppliername" style="width:200px;"></el-input>
          <el-popover placement="right" width="400" v-model="SupplierListApp.visible">
            <div style="width:400px">
              <el-table
                border
                :data="Lists.supplierList"
                @row-click="selectSuppliser"
                :stripe="true"
                :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
                :row-style="{height:'5px'}"
                :cell-style="{padding:'5px 0'}"
                tooltip-effect="light"
                highlight-current-row
                style="width: 100%;"
                height="300px"
              >
                <el-table-column  label="序号" width="50">
                  <template slot-scope="scope">
                    <span>{{scope.$index + 1}}</span>
                  </template>
                </el-table-column>
                <el-table-column  prop="code" label="供应商编码" width="95"></el-table-column>
                <el-table-column  prop="name" label="供应商名称" width="250"></el-table-column>
              </el-table>
              <div style="width:100px;background:red;margin:3px auto;">
                <el-button type="primary" @click="SureSelectSupplier">确定选择机构</el-button>
              </div>
            </div>
            <el-button slot="reference" @click="SupplierListApp.visible=true">选择</el-button>
          </el-popover>
        </el-form-item>
        <br />
        <el-form-item label="联系人" label-width="60px">
          <el-input v-model="submit.contact" style="width:150px;"></el-input>
        </el-form-item>
        <el-form-item label="电话" label-width="40px">
          <el-input v-model="submit.phone" style="width:200px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="交货地址" label-width="70px">
          <el-input v-model="submit.dealaddress" style="width:500px;"></el-input>
        </el-form-item>
        <br />
        <el-form-item label="*组织机构" label-width="75px">
          <el-input v-model="submit.orgname" style="width:300px;"></el-input>
          <el-popover placement="right" width="400" v-model="treeApp.visible">
            <div style="width:400px">
              <treeTable
                :tableData="treeApp.here_list.treelist"
                table_height="500"
                :firstColumn="treeApp.firstColumn"
                @rowclick="selectFather"
                v-if="treeApp.hackReset"
              >
                <el-table-column prop="code" label="编码" width="150"></el-table-column>
              </treeTable>
              <div style="width:100px;background:red;margin:3px auto;">
                <el-button type="primary" @click="SureSelectOrange">确定选择机构</el-button>
              </div>
            </div>
            <el-button slot="reference" @click="treeApp.visible=true">选择</el-button>
          </el-popover>
        </el-form-item>
        <el-form-item label="*业务员" label-width="68px">
          <el-input v-model="submit.bizusername" style="width:150px;"></el-input>
          <el-popover placement="right" width="300" v-model="UserListApp.visible">
            <div style="width:300px">
              <el-table
                border
                :data="Lists.userList"
                @row-click="selectUser"
                :stripe="true"
                :header-cell-style="{background:'#e3e5e9',color:'#606266'}"
                :row-style="{height:'5px'}"
                :cell-style="{padding:'5px 0'}"
                tooltip-effect="light"
                highlight-current-row
                style="width: 100%;"
                height="300px"
              >
                <el-table-column prop="name" label="姓名"></el-table-column>
              </el-table>
              <div style="width:100px;background:red;margin:3px auto;">
                <el-button type="primary" @click="SureSelectUser">确定选择业务员</el-button>
              </div>
            </div>
            <el-button slot="reference" @click="UserListApp.visible=true">选择</el-button>
          </el-popover>
        </el-form-item>
        <br />
        <el-form-item label="付款方式" label-width="68px">
          <el-select v-model="submit.paymenttype">
            <el-option label="现金付款" value="现金付款"></el-option>
            <el-option label="在线支付" value="在线支付"></el-option>
            <el-option label="货到付款" value="货到付款"></el-option>
            <!-- <el-option v-for="item in classList" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
          </el-select>
        </el-form-item>
        <el-form-item label="备注" label-width="40px">
          <el-input v-model="submit.memo" style="width:700px;"></el-input>
        </el-form-item>
      </el-form>
      <div>
        <el-table
          border
          show-summary
          :data="App_Bill_Detail_List.list"
          size="mini"
          :summary-method="getSummaries"
          :row-style="{height:'5px'}"
          :cell-style="{padding:'5px 0'}"
        >
          <el-table-column  label="序号" width="50">
            <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="商品编码" width="250">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.code"
                style="width:150px"
              ></el-input>
              <el-popover
                placement="right"
                v-model="scope.row.Listvisible"
                width="400"
                trigger="click"
              >
                <el-table
                  :data="miniApp_Good_List.list"
                  @row-click="selectGood"
                  highlight-current-row
                >
                  <el-table-column width="150" property="date" label="日期"></el-table-column>
                  <el-table-column width="100" property="name" label="姓名"></el-table-column>
                  <el-table-column width="300" property="address" label="地址"></el-table-column>
                </el-table>
                <el-button size="mini" @click="SureGood(scope.row)">确定选择该商品</el-button>
                <el-button
                  style="padding:auto 0"
                  size="mini"
                  v-show="scope.row.show"
                  @click="scope.row.Listvisible=true"
                  slot="reference"
                >选择</el-button>
              </el-popover>
              <span v-show="!scope.row.show">{{scope.row.code}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="200">
            <template slot-scope="scope">
              <el-input
                size="mini"
                @change="getValue()"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.name"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.name}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="规格型号" width="250">
            <template slot-scope="scope">
              <el-input size="mini" placeholder v-show="scope.row.show" v-model="scope.row.spec"></el-input>
              <span v-show="!scope.row.show">{{scope.row.spec}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="采购数量" width="95">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.count"
                @keyup.native="oninput"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.count}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="单位" width="125">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.unitname"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.unitname}}</span>
            </template>
          </el-table-column>
          <el-table-column label="采购单价" width="95">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.price"
                @keyup.native="oninput"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.price}}</span>
            </template>
          </el-table-column>
          <el-table-column label="采购金额" width="95">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.money"
                @keyup.native="oninput"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.money}}</span>
            </template>
          </el-table-column>
          <el-table-column label="税率（%）" width="95">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.taxrate"
                @keyup.native="oninput"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.taxrate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="税金" width="95">
            <template slot-scope="scope">
              <el-input
                size="mini"
                placeholder
                v-show="scope.row.show"
                v-model="scope.row.tax"
                @keyup.native="oninput"
              ></el-input>
              <span v-show="!scope.row.show">{{scope.row.tax}}</span>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip label="备注" width="95">
            <template slot-scope="scope">
              <el-input size="mini" placeholder v-show="scope.row.show" v-model="scope.row.memo"></el-input>
              <span v-show="!scope.row.show">{{scope.row.memo}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="scope.row.show =true">编辑</el-button>
              <el-button size="mini" @click="save(scope.row)">保存</el-button>
              <el-button size="mini" @click="deleteLine(scope.$index)">删除</el-button>
              <el-button size="mini" @click="addLine">增加一行</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>
          <div style=" margin: 0 auto;width:70px; margin-bottom:20px">
            <el-button size="mini" type="primary" @click="addLine">增加一行</el-button>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="visible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="Submit()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import treeTable from "../../multiplexing/treetable";
export default {
  components: { treeTable },
  props: {
    form: {
      style: Object
    },
    detail_list: {}
  },
  data() {
    return {
      submit: {
        id: "",
        ref: "",
        billstatu: "",
        dealdate: "",
        dealaddress: "",
        suppliserid: "",
        goodsmoney: "",
        tax: "",
        moneyandtax: "",
        paymenttype: "",
        memo: "",
        bizusername: "",
        orgname: "",
        contact: "",
        suppliername: "",
        inputusername: "",
        datecreated: "",
        confirmusername: "",
        confirmdate: "",
        phone: ""
      },
      visible: true,
      Lists: {
        supplierList: [],
        orangeList: [],
        userList: []
      },
      treeApp: {
        hackReset: false,
        visible: false,
        here_list: {},
        firstColumn: {
          name: "机构组织名",
          prop: "name",
          width: "300"
        }
      },
      TempApp: {
        supplierTempRow: {}
      },
      SupplierListApp: {
        visible: false,
        datas: {}
      },
      UserListApp: {
        visible: false
      },
      App_Bill_Detail_List: {
        list: [],
        SelectRow: {}
      },
      miniApp_Good_List: {
        visible: false
      }
      // tabledatas: [
      //   {
      //     id: 1,
      //     orderid: 2,
      //     code: "0000001",
      //     name: "酸萝卜",
      //     spec: "500g",
      //     unitname: "把",
      //     taxrate: 10.0,
      //     count: 2,
      //     price: 2.0,
      //     money: 4.0,
      //     moneywithtax: 4.4,
      //     pwcount: 8,
      //     leftcount: -6,
      //     memo: null,
      //     tax: 0.4
      //   }
      // ]
    };
  },
  methods: {
    getValue() {
      this.$forceUpdate();
    },
    addLine() {
      this.App_Bill_Detail_List.list.push({
        show: true,
        Listvisible: false,
        id: "",
        code: "",
        name: "",
        saleprice: "",
        spec: "",
        unitname: "",
        purchaseprice: "",
        brandfullname: "",
        taxrate: "",
        classid: ""
      });
    },
    save(row) {
      // row.money = row.count*row.price
      window.console.log(row);

      row.show = false;
    },
    deleteLine(index) {
      this.App_Bill_Detail_List.list.splice(index, 1);
    },
    //控制两位小数输入
    oninput(e) {
      e.target.value =
        e.target.value.match(/^\d*([.]?([0-9]{0,2}))/g)[0] || null;
    },

    Check() {
      if (
        this.submit.dealdate == null ||
        this.submit.dealdate == "" ||
        this.submit.suppliername == null ||
        this.submit.suppliername == "" ||
        this.submit.orgname == null ||
        this.submit.orgname == "" ||
        this.submit.bizusername == null ||
        this.submit.bizusername == "" ||
        this.App_Bill_Detail_List.list == null ||
        this.App_Bill_Detail_List.list.length == 0
      ) {
        this.$message.error("请录入完整的数据！");
        return false;
      }
      return true;
    },
    Submit() {
      window.console.log(this.submit);

      if (this.Check()) {
        var day2 = new Date();
        day2.setTime(day2.getTime());
        this.submit.ref =
          "PO" +
          day2.getFullYear() +
          (day2.getMonth() + 1) +
          day2.getDate() +
          day2.getHours() +
          day2.getMinutes() +
          day2.getSeconds();
        this.submit.billstatu = "待审核";
        this.$http.post("order/insert", this.submit).then(response => {
          let responseid = response.data;
          this.App_Bill_Detail_List.list.forEach(row => {
            row.orderid = responseid;
            row.moneywithtax = parseFloat(row.money) + parseFloat(row.tax);
          });
          this.$http
            .post("orderdetail/insert", this.App_Bill_Detail_List.list)
            .then(response => {
              if (response.data == "success") {
                this.$message({
                  message: "添加完成",
                  type: "success"
                });
                this.NeedRefresh();
                this.visible = false;
              }
            });
        });
      }
    },
    closeDialog() {
      window.console.log("dfialog-close");
      this.$emit("dialog-close");
    },
    NeedRefresh() {
      this.$emit("refresh");
    },
    selectSuppliser(Row) {
      this.submit.suppliername = Row.name;
      this.submit.contact = Row.concact;
      this.submit.phone = Row.phone;
    },
    selectFather(node) {
      this.submit.orgname = node.name;
    },
    selectUser(Row) {
      this.submit.bizusername = Row.name;
    },
    selectGood(Row) {
      this.miniApp_Good_List.SelectRow = JSON.parse(JSON.stringify(Row));
    },
    GetLists() {
      this.$http.get("/user/list").then(response => {
        this.Lists.userList = response.data;
      });
      this.$http.post("/good/someGoodList", {}).then(response => {
        this.miniApp_Good_List.list = response.data;
      });
      this.$http.get("/supplier/list").then(response => {
        this.Lists.supplierList = response.data;
      });
      this.$http.get("orangetree/list").then(response => {
        this.treeApp.here_list.treelist = response.data;
        this.$nextTick(() => {
          this.treeApp.hackReset = true;
        });
      });
    },
    SureSelectOrange() {
      this.treeApp.visible = false;
    },
    SureSelectSupplier() {
      this.SupplierListApp.visible = false;
    },
    SureSelectUser() {
      this.UserListApp.visible = false;
    },
    SureGood(Row) {
      Row = Object.assign(Row, this.miniApp_Good_List.SelectRow);
      Row.Listvisible = false;
      // Row.name = this.miniApp_Good_List.SelectRow.name
      window.console.log("select", this.miniApp_Good_List.SelectRow);
      window.console.log("Row", Row);
    },
    getSummaries() {
      const sums = [];
      sums[0] = "合计";
      let count = 0;
      let money = 0;
      let tax = 0;
      this.App_Bill_Detail_List.list.forEach(row => {
        // window.console.log(Number(row.price) )
        count += Number(row.count);
        money += Number(row.money);
        tax += Number(row.tax);
      });
      sums[1] = "";
      sums[2] = "";
      sums[3] = "";
      sums[4] = count;
      sums[5] = "";
      sums[6] = "";
      sums[7] = money;
      sums[8] = "";
      sums[9] = tax;
      sums[10] = "";
      this.submit.tax = tax;
      this.submit.moneyandtax = tax + money;
      this.submit.goodsmoney = money;
      return sums;
    }
  },
  created() {
    // this.$http
    //   .post("orangetree/organename", { id: this.form.orangeid })
    //   .then(response => {
    //     this.submit.orangename = response.data;
    //   });
    // this.submit = JSON.parse(JSON.stringify(this.form));
    this.GetLists();
  }
};
</script>

<style>
.form {
  margin-top: 20px;
}
</style>